<template>
	<view v-if="props.show && show" class="x-navbar" :class="['x-navbar-' + props.mode]" :style="{ '--bg-opacity': opacity }">
		<view class="x-navbar-body">
			<view class="">
				<text>{{ title }}</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-navbar-mp-weixin"></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { usePlatformStore, useRefs } from "@/stores";
import { onBeforeMount, ref, watchEffect,defineProps } from "vue";
import { $Platform } from "@/utils/const/env";
const props = withDefaults(defineProps<{
	title?: string
	show?: boolean
	platformsShow?: string[]
	platformsHide?: string[]
	mode?: 'fixed' | 'sticky'
	scrollTop?: number
}>(), {
	show: true,
	platformsHide: [$Platform.H5_WECHAT],
	mode: 'sticky',
	scrollTop: 0
});
const opacity = ref(0);
const title = ref(props.title)
const show = ref(true);
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1];
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
watchEffect(() => {
	opacity.value = props.scrollTop > 50 ? 1 : props.scrollTop / 50;
})
onBeforeMount(() => {
	if (props.title === void (0)) {
		title.value = currentPage.$page?.meta?.navigationBar?.titleText;
	}
	if (props.platformsShow && props.platformsShow.length > 0) {
		// 判断props.platforms和PlatformStore.value.platforms是否有交集
		show.value = props.platformsShow.some((item: string) => PLATFORM.value.platforms.includes(item));
	}
	if (props.platformsHide && props.platformsHide.length > 0) {
		// 判断props.platforms和PlatformStore.value.platforms是否有交集
		show.value = !props.platformsHide.some((item: string) => PLATFORM.value.platforms.includes(item));
	}
})
</script>

<style lang="scss" scoped></style>